<template>
  <!-- 商品展示容器 -->
  <div class="goods-box">
    <!-- 搜索栏容器 -->
    <div class="search2">
      <!-- 输入框组件  -->
      <el-input
          v-model="searchValue"
          maxlength="100"
          clearable
          style="width:290px;"
      />
      <!-- 搜索图标图片，点击触发搜索方法  -->
      <img
          src="../../assets/img/search.png"
          @click="handleSearch"
          class="search-icon"
          alt="搜索"
      />
      <!-- 热门搜索提示文字  -->
      <i style="color:#696969;font-size:13px;font-style:normal;">
        &nbsp;热门搜索：
        <!-- 热门搜索标签  -->
        <a class="tag-item" @click="handleTopicDetail('苹果')">苹果</a>
        <a class="tag-item" @click="handleTopicDetail('新疆哈密瓜')">新疆哈密瓜</a>
        <a class="tag-item" @click="handleTopicDetail('樱桃')">樱桃</a>
        <a class="tag-item" @click="handleTopicDetail('西红柿')">西红柿</a>
        <a class="tag-item" @click="handleTopicDetail('水稻')">水稻</a>
        <a class="tag-item" @click="handleTopicDetail('玉米')">玉米</a>
        <a class="tag-item" @click="handleTopicDetail('赣南脐橙')">赣南脐橙</a>
      </i>
    </div>

    <!-- 商品列表循环渲染  -->
    <div
        class="goods"
        v-for="(item, index) in cgoods"
        :key="index"
        @click="detailsClick(item.orderId)"
        :style="(index+1)%5===0?'margin-right:0':'margin-right:25px;'"
    >
      <!-- 控制每行第5个商品不显示右侧边距，实现整齐排列 -->
      <!-- 商品图片，根据是否有图片路径显示不同图片，使用Vuex中的图片路径前缀 -->
      <img
          class="goods-img"
          v-if="item.picture!==''"
          :src="$store.state.imgShowRoad + '/file/' + item.picture"
          alt=""
      />
      <img
          class="goods-img"
          v-if="item.picture===''"
          :src="$store.state.imgShowRoad + '/file/' + 'wutu.gif'"
          alt=""
      />

      <!-- 商品信息容器 -->
      <div class="info">
        <!-- 商品发布者信息，用方括号包裹显示 -->
        <span class="initiator">[{{ item.ownName }}]</span>
        <!-- 商品描述，使用多行文本溢出省略样式 -->
        <p class="content">{{ item.content }}</p>
        <!-- 商品价格，存在时显示，红色加粗字体 -->
        <span class="price" v-if="item.price">￥{{ item.price }}</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 搜索关键词数据变量
      searchValue: ''
    };
  },
  props: {
    // 接收父组件传递的商品数组数据
    cgoods: {
      type: Array,
    },
  },
  methods: {
    // 商品详情页跳转方法，接收订单ID，更新Vuex状态并跳转路由
    detailsClick(item) {
      this.$store.commit("updateOrderId", item); // 更新订单ID到Vuex
      // 路由跳转并处理可能的错误
      this.$router.push(`/home/details?orderId=${item}`).catch((err) => err);
    },
    // 搜索方法，触发父组件的搜索事件并传递搜索关键词
    handleSearch() {
      this.$emit('handleSearch', this.searchValue); // 触发父组件自定义事件
    },
    // 热门标签点击处理方法，设置搜索词并触发搜索
    handleTopicDetail(val) {
      this.searchValue = val; // 将标签值赋给搜索框
      this.handleSearch(); // 调用搜索方法
    }
  },
};
</script>

<style lang="less" scoped>
.search2 {
  height: 60px;
  background-color: #ffffff;
  padding: 10px 20px;
  margin-top: 10px;

  .tag-item {
    margin-right: 10px;
    cursor: pointer; /* 鼠标悬停显示指针样式 */
  }

  .search-icon {
    position: relative;
    bottom: 2px; /* 垂直方向微调位置 */
    left: -2px; /* 水平方向微调位置 */
    cursor: pointer; /* 鼠标悬停显示指针样式 */
  }
}

.goods-box {
  background-color: #ece4e4;
  width: 1100px;
  margin: 0 auto; /* 水平居中布局 */

  .goods {
    float: left; /* 左浮动实现多列布局 */
    width: 200px;
    height: 290px;
    margin-top: 15px;
    padding: 15px;
    background-color: #ffffff;
    border: 1px solid #76807b; /* 商品卡片边框 */
    cursor: pointer; /* 鼠标悬停显示指针样式 */

    .goods-img {
      float: left;
      width: 160px;
      height: 170px;
      margin-right: 10px;
      border-radius: 6px; /* 图片圆角 */
    }

    .info {
      width: 160px;
      float: left;

      .initiator {
        color: #6c0c0c; /* 发布者信息颜色 */
      }

      .title {
        /* 单行文本溢出省略样式 */
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
      }

      .content {
        height: 50px;
        /* 多行文本溢出省略样式（最多2行） */
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2; /* 原代码中7行可能存在显示问题，建议调整为合理行数 */
        -webkit-box-orient: vertical;
        font-size: 10px;
      }

      .price {
        font-size: 15px;
        font-weight: bold;
        display: block;
        color: red; /* 价格红色显示 */
      }
    }
  }
}

/* 深度选择器修改Element UI组件样式（解决样式穿透问题） */
.search2 /deep/ .el-input--suffix .el-input__inner {
  height: 35px;
  line-height: 35px; /* 输入框高度和行高一致实现垂直居中 */
}
</style>